<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="simple" />
        <Editor
            :style="{ height: `${height}px`, 'overflow-y': 'hidden' }"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            mode="default"
            @onCreated="handleCreated"
        />
    </div>
</template>
<!-- https://www.wangeditor.com/v5/toolbar-config.html#getconfig -->
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor, IToolbarConfig } from "@wangeditor/editor";
// export default {
//     components: { Editor, Toolbar },
//     setup() {
interface Props {
    height?: string;
}
const props = withDefaults(defineProps<Props>(), {
    height: "500",
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");

// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        // valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
        // const toolbarConfig: Partial<IToolbarConfig> = {
        //     // TS 语法
        //     // const toolbarConfig = {                        // JS 语法
        //     /* 工具栏配置 */
        // };
        let editor = editorRef.value;
        const toolbar = DomEditor.getToolbar(editor);

        const curToolbarConfig = (toolbar as any).getConfig();
        console.log(curToolbarConfig.toolbarKeys); // 当前菜单排序和分组
        // toolbarConfig.excludeKeys = [
        //     "headerSelect",
        //     "italic",
        //     "group-more-style", // 排除菜单组，写菜单组 key 的值即可
        // ];
        // console.log(IToolbarConfig);
    }, 1500);
});

const toolbarConfig = {
    toolbarKeys: [
        // "headerSelect", // 标题
        "bold", // 粗体
        "underline", // 下划线
        // "italic", // 斜体
        "through", // 删除线
        // "code", // 行内代码
        "sub", // 下标
        "sup", // 上标
        // "clearStyle", // 清除格式
        "color", // 字体颜色
        "bgColor", // 背景色
        "fontSize", // 字号
        "fontFamily", // 字体
        "lineHeight", // 行高
        "indent", // 增加缩进
        "delIndent", // 减少缩进
        "justifyLeft", // 左对齐
        "justifyRight", // 右对齐
        "justifyCenter", // 居中对齐
        "justifyJustify", // 两端对齐
        // "insertImage", // 网络图片
        // "deleteImage", // 删除图片
        // "editImage", // 编辑图片
        // "viewImageLink", // 查看链接
        // "imageWidth30", // 图片宽度相对于编辑器宽度的百分比30
        // "imageWidth50", // 图片宽度相对于编辑器宽度的百分比50
        // "imageWidth100", // 图片宽度相对于编辑器宽度的百分比100
        "divider", // 分割线
        "emotion", // 表情
        // "insertLink", // 插入链接
        // "editLink", // 修改链接
        // "unLink", // 取消链接
        // "viewLink", // 查看链接
        "codeBlock", // 代码块
        "blockquote", // 引用
        // "header1", // 标题1
        // "header2", // 标题2
        // "header3", // 标题3
        // "header4", // 标题4
        // "header5", // 标题5
        // "todo", // 待办
        "redo", // 重做
        "undo", // 撤销
        // "fullScreen", // 全屏
        // "enter", // 回车
        // "bulletedList", // 无序列表
        "numberedList", // 有序列表
        "insertTable", // 插入表格
        // "deleteTable", // 删除表格
        // "insertTableRow", // 插入行
        // "deleteTableRow", // 删除行
        // "insertTableCol", // 插入列
        // "deleteTableCol", // 删除列
        // "tableHeader", // 表头
        // "tableFullWidth", // 宽度自适应
        // "insertVideo", // 插入网络视频
        // "uploadVideo", // 上传视频
        // "editVideoSize", // 修改视频尺寸
        "uploadImage", // 上传图片
        // "codeSelectLang", // 选择语言
    ],
};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    let editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor: any) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
};

//         return {
//             editorRef,
//             valueHtml,
//             mode: "default", // 或 'simple'
//             toolbarConfig,
//             editorConfig,
//             handleCreated,
//         };
//     },
// };
</script>
